<script setup>
import { message } from 'ant-design-vue'
import http from '@/config/axios-config'
import { computed, ref, toRefs, watch } from 'vue'
import SelectIcon from '@/components/plug-in/select-icon'
import SaveDialog from '@/components/plug-in/save-dialog'

const props = defineProps({
  visible: Boolean,
  form: [Object, Boolean],
  parentMenu: Array
})
const emit = defineEmits(['update:visible', 'complete'])
let show = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

let saveForm = ref({})
let saveModal = ref()
let saveLoading = ref(false)
let saveItemLayout = ref({
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  }
})
let isCreate = ref(false)
let {parentMenu} = toRefs(props)

let defaultForm = { NodeShowType: 1, NodeType: 1 }
const submitHandler = () => {
  saveModal.value.validateFields().then(() => {
    saveLoading.value = true
    let url = isCreate.value ? '/node/create' : '/node/update'
    http.post(url, saveForm.value).then(res => {
      saveLoading.value = false
      if (res.code === 200) {
        message.success(res.msg)
        show.value = false
        saveForm.value = defaultForm
        emit('complete')
      }
    })
  }).catch(() => {})
}

watch(() => props.form, () => {
  saveForm.value = props.form ? Object.assign({}, props.form) : defaultForm
  isCreate.value = !props.form
}, { deep: true })

</script>

<template>
  <save-dialog
      v-model:visible="show"
      :title="isCreate ? '添加菜单' : '编辑菜单'"
      :confirm-loading="saveLoading"
      width="800px"
      @ok="submitHandler">
    <div>
      <a-form ref="saveModal" :model="saveForm" v-bind="saveItemLayout">
        <a-row :gutter="[20, 0]">
          <a-col :span="12">
            <a-form-item name="ParentID" label="上级菜单">
              <a-tree-select
                  v-model:value="saveForm.ParentID"
                  show-search
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  placeholder="请选择上级菜单"
                  allow-clear
                  tree-default-expand-all
                  :tree-data="parentMenu"
              >
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="NodeType" label="菜单类型">
              <a-radio-group v-model:value="saveForm.NodeType">
                <a-radio :value="1">菜单</a-radio>
                <a-radio :value="2">按钮</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="NodeName" label="菜单名称" :rules="[{ required: true, message: '请输入菜单名称' }]">
              <a-input v-model:value="saveForm.NodeName" :maxlength="10" autocomplete="off" placeholder="请输入菜单名称"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="NodeOrder" label="排序号" :rules="[{ required: true, message: '请输入排序号' }]">
              <a-input v-model:value="saveForm.NodeOrder" :maxlength="10" autocomplete="off" placeholder="请输入排序号"/>
            </a-form-item>
          </a-col>
          <a-divider style="margin-top: 0"/>
          <a-col :span="12">
            <a-form-item name="ControllerName" label="控制器名称" :rules="[{ required: true, message: '请输入控制器名称' }]">
              <a-input v-model:value="saveForm.ControllerName" :maxlength="10" autocomplete="off"
                       placeholder="请输入控制器名称"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="ActionName" label="方法名称" :rules="[{ required: true, message: '请输入方法名称' }]">
              <a-input v-model:value="saveForm.ActionName" :maxlength="10" autocomplete="off" placeholder="请输入方法名称"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="NodeIcon" label="菜单图标">
              <select-icon v-model:value="saveForm.NodeIcon"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="NodeShowType" label="是否显示">
              <a-radio-group v-model:value="saveForm.NodeShowType">
                <a-radio :value="1">显示</a-radio>
                <a-radio :value="0">不显示</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </save-dialog>
</template>
